<template>
  <div>
    <!-- 面包屑导航栏 -->
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item class="crubms">
          <i class="el-icon-s-order" style="margin-right: 10px"></i>基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card style="margin-top: 10px">
      <!-- 操作栏 -->
      <div>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete-solid"
          @click="deleteSelect"
          >批量删除</el-button
        >
        <el-select
          placeholder="地址"
          style="margin-left: 10px; width: 150px"
          v-model="address"
        >
          <el-option
            v-for="item in select_option"
            :key="item.id"
            :label="item.place"
            :value="item.place"
          >
          </el-option>
        </el-select>
        <el-input placeholder="用户名" class="input" v-model="input">
        </el-input>
        <el-button
          type="primary"
          size="small"
          round
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="search"
          >搜索</el-button
        >
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" border @selection-change="select_change">
          <el-table-column width="50" align="center" type="selection">
          </el-table-column>
          <el-table-column label="ID" align="center" prop="id">
          </el-table-column>
          <el-table-column label="用户名" align="center" prop="name">
          </el-table-column>
          <el-table-column label="账户余额" align="center" prop="price">
          </el-table-column>

          <el-table-column label="头像(查看大图)" align="center">
            <template v-slot:default="scope">
              <el-image
                class="img"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="地址" align="center" prop="place">
          </el-table-column>

          <el-table-column label="状态" align="center">
            <template v-slot:default="scope">
              <el-tag
                :type="scope.row.status === '成功' ? 'success' : 'danger'"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center" prop="time">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot:default="scope">
              <el-button
                type="text"
                @click="edit(scope.$index, scope.row)"
                size="small"
                class="edit"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="remove(scope.$index)"
                size="small"
                class="remove"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页导航 -->
      <div class="fenye">
        <el-pagination
          background
          layout="total,prev,pager,next"
          :current-page="yeshu.pageIndex"
          :page-size="yeshu.pageSize"
          :total="pageTotal"
          @current-change="handleChange"
        >
        </el-pagination>
      </div>
      <!-- 弹出对话框 -->
      <div>
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
          <el-form label-width="70px" :model="form">
            <el-form-item label="用户">
              <el-input v-model="form.name" @input="old_user"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.place" @input="old_place"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog_footer">
            <el-button @click="editVisible = false">确定</el-button>
            <el-button @click="reduction">取消</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    //当选择栏发生改变的时候 调用
    select_change(val) {
      this.selectData = val;
      console.log(val);
    },
    // 删除选中的
    deleteSelect() {
      if (this.selectData.length) {
          // 将选中的剔除
        for (var i = 0; i < this.tableData.length; i++) {
          for (var j = 0; j < this.selectData.length; j++) {
            if (this.selectData[j].id == this.tableData[i].id) {
              this.tableData.splice(i, 1);
              console.log(i);
              if (i == 0) {
                i = 0;
              } else {
                i = i - 1;
              }
            }
          }
        }
          this.$message.success('已经删除完毕')
      } else {
        this.$message.error('没有选中列表')
      }
      
      this.selectData = [];
    },
    // 搜索
    search() {
      // 利用filter 来过滤掉不符合 条件的数组，返回只符合条件的数组
      this.tableData = this.tableData.filter((value) => {
        return (
          value.name == this.input &&
          (this.address == "" || value.place == this.address)
        );
      });
    },
    // 还原
    reduction() {
      this.editVisible = false;
      this.old_data = JSON.parse(localStorage.getItem("old_data"));
      this.idx = parseInt(localStorage.getItem("index"));

      // 通过$set 来重新设置 table中的数据
      this.$set(this.tableData, this.idx, this.old_data);
      // 移除本地存储的数据
      localStorage.removeItem("old_data");
      localStorage.removeItem("index");
    },
    // 记录老数据
    old_user(value) {
      this.new_name = value;
    },
    // 记录老数据
    old_place(value) {
      this.new_place = value;
    },
    click() {
      console.log(this.tableData);
    },
    edit(index, row) {
      this.form = row;
      this.editVisible = true;
      localStorage.setItem("old_data", JSON.stringify(row));
      localStorage.setItem("index", JSON.stringify(index));
    },
    remove(index) {
      // 组件库自带的 方法，可以弹出框，并且通过then方法来进行成功与否之后的操作
      this.$confirm("确定要删除吗？", "提示", {
        type: "error",
      }).then(
        () => {
          this.tableData.splice(index, 1);
        },
        () => {}
      );
    },
    handleChange() {
      this.axios.get("/data").then((res) => {
        this.tableData = res.data.array;
      });
    },

    // 请求数据
    send() {
      this.axios.get("/data").then((res) => {
        this.tableData = res.data.array;
      });
    },
  },
  data() {
    return {
      //保留旧数据
      old_data: [],
      new_name: "",
      new_palce: "",
      address: "",
      input: "",
      select_option: [
        {
          id: 1,
          place: "湖南",
        },
        {
          id: 2,
          place: "河南",
        },
        {
          id: 3,
          place: "陕西",
        },
      ],
      selectData: [], // 用来获取select选中的数据
      yeshu: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      pageTotal: 30, // 总页数
      editVisible: false,
      form: {}, // 用来获取点击编辑选中的内容信息
      idx: -1,
      tableData: [], // 用来获取传输的数据
    };
  },
  created() {
    console.log(this.tableData);
    this.send();
  },
};
</script>

<style scoped>
.dialog_footer {
  text-align: center;
  display: inline-block;
  display: flex;
  justify-content: space-around;
}
>>> .el-dialog__footer {
  margin-top: -20px;
}
.fenye {
  text-align: center;
  margin-top: 20px;
}
.remove {
  background-color: red;
}
.remove,
.edit {
  color: white;
  padding: 5px 10px;
}
.edit {
  color: white;
  background-color: blue;
}
.img {
  width: 40px;
  height: 40px;
}
.table {
  margin-top: 30px;
}
.input {
  display: inline-block;
  width: 300px;
  margin-left: 10px;
}
.crubms {
  font-size: 20px;
}
</style>